<template>
  <tab-bar>
      <tab-bar-item path="/./home" activeColor='blue'><template v-slot:item-icon><img src='../assets/img/home.png'></template>
      <template v-slot:item-text><div>首页</div></template>
      <template v-slot:item-icon-active><img src='../assets/img/home_active.png'></template>
      </tab-bar-item>
       <tab-bar-item path="/./category" activeColor='blue'><template v-slot:item-icon><img src='../assets/img/class.png'></template>
       <template v-slot:item-text><div>分类</div></template>
       <template v-slot:item-icon-active><img src='../assets/img/class_active.png'></template>
       </tab-bar-item>
        <tab-bar-item path="/./car" activeColor='blue'><template v-slot:item-icon><img src='../assets/img/car.png'></template>
        <template v-slot:item-text><div>购物车</div></template>
        <template v-slot:item-icon-active><img src='../assets/img/car_active.png'></template>
        </tab-bar-item>
         <tab-bar-item path="/./mine" activeColor='blue'><template v-slot:item-icon><img src='../assets/img/mine.png'></template>
         <template v-slot:item-text><div>我的</div></template>
         <template v-slot:item-icon-active><img src='../assets/img/mine_active.png'></template>
         </tab-bar-item>
    </tab-bar>
</template>

<script>
import TabBar from './TabBar'
import TabBarItem from './TabBarItem'
export default {
  name:'MainTabBar',
components:{
  TabBar,
  TabBarItem
  }
}
</script>

<style>
.tab-bar-item {
  flex:1;
  text-align:center;
  height:49px;
  font-size:14px;
}
.tab-bar-item img {
  width:24px;
  height:24px;
  margin-top:3px;
  vertical-align: middle;
  margin-bottom:2px;
}

</style>